<template>
  <div class="container">
      <div class="btnClose">       
           <router-link to='/'><span class="iconfont iconicon-test"></span></router-link>
        </div>
         <div class="logo">
            <span class="iconfont iconnew"></span>
        </div>
        <myipt
        type='text'
        placeholder='用户名/手机号码'
        :rule='/^1[3456789]\d{9}$/'
        msg='请输入有效的手机号码'
        @valchange='setusername' 

         ></myipt>
        <myipt 
         type='text'
         placeholder='昵称'
        :rule='/\w{4}/'
         msg='请输入有效的昵称'
         @valchange='setnickname'
        ></myipt>
        <myipt
        type='password'
        placeholder='密码'
        :rule='/^\d{6}$/'
        msg='请输入有效的密码'
         @valchange='setpassword'
        ></myipt>
        <mybtn
        btntext='注册'
        @clicked="register"
        ></mybtn>
  </div>
</template>

<script>
import mybtn from '../components/mybtn'
import myipt from '../components/myinput'
export default {
    data(){
        return {
            username:'',
            nickname:'',
            password:'',
        }
    },
    components:{
        mybtn,
        myipt
    },
    methods:{
        setusername(data){
          this.username=data
        },
        setnickname(data){
            this.nickname=data
        },
        setpassword(data){
            this.password=data
        },
        register(){
            // console.log(this.$chilren);
            console.log(this.username);
            console.log(this.nickname);
            console.log(this.password);
            if(!this.username || !this.nickname||!this.password){
                this.$toast.fail('请填写完整的注册信息')
                return
            }
            this.$axios({
                url:'http://127.0.0.1:3000/register',
                method:'post',
                data:{
                    username:this.username,
                    password:this.password,
                    nickname:this.nickname
                }
            }).then((res)=>{
                  console.log(res.data);
                  if(res.data.message==='注册成功'){
                      this.$toast.success('注册成功')
                  }
            })
        }




    }


}
</script>

<style lang='less' scoped>
@import url('http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css');
.container {
    padding: 24/360*100vw;
}
.btnClose {
    .iconfont {
        font-size: 28/360*100vw;
    }
}
.logo {
    text-align: center;
    .iconfont {
        font-size: 126/360*100vw;
        color: #d81e06;
    }
}
</style>